<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <div id="app">
     <lk-count></lk-count>
     <lk-count></lk-count>
     <lk-count></lk-count>
     <lk-count></lk-count>
     <lk-count></lk-count>
  </div>

  <template id="count">
     <div>
       <p>计算的结果: {{count}}</p>
       <button @click="add">+</button>
       <button @click="sub">-</button>
       <p>-------------------------</p>
     </div>
  </template>
  <script src="js/vue.js"></script>
  <script>
    const obj = {
      count: 0
    };

    const Count = {
      /*data:{
        count: 0
      }*/
       data(){
         /*return {
           count: 0
         }*/
         // 错误的写法
         return obj;
       },
       template: '#count',
       methods:{
         add(){
           this.count++;
         },
         sub(){
           this.count--;
         }
       }
    };

    const app = Vue.createApp({
      data() {
        return {
          msg: '撩课学院'
        }
      },
      /*data: {
        msg: '撩课学院'
      }*/
      components:{
        'lk-count': Count
      }
    }).mount('#app');
  </script>
</body>
</html>
